<template>
	<div class="footer">
		<div class="todo-count">共<strong>{{ lastLength }}</strong>条未完成任务 </div>
		<div class="filters">
			<div class="button" @click.prevent="updateStatus('all')" :class="{ selected: status === 'all' }">全部</div>
			<div class="button" @click.prevent="updateStatus('active')" :class="{ selected: status === 'active' }">待办</div>
			<div class="button" @click.prevent="updateStatus('completed')" :class="{ selected: status === 'completed' }">已完成
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			lastLength: {
				type: Number,
			},
			status: {
				type: String,
			}
		},
		data() {
			return {

			}
		},
		methods: {
			updateStatus(status) {
				this.$emit('updateStatus', status) //emit前一定要加上$
			}
		}
	}
</script>

<style>
	.footer {
		display: flex;
		align-items: center;
		padding: 10px 15px;
		font-size: 15px;
		border-top: 1px solid #e6e6e6;
	}

	.todo-count {
		flex: 1;
		text-align: left;
	}

	.filters {
		display: flex;
	}

	.filters .button {
		color: inherit;
		margin: 3px;
		padding: 3px 7px;
		border: 1px solid transparent;
		border-radius: 3px;
		border-color: #767676;
		cursor: pointer;
	}

	.selected {
		background-color: #e6e6e6;
	}
</style>